<template>
  <div class="zong">
    <!-- 上边两个图表 -->
    <div class="top">
      <div class="lefttop">
        <div class="title">工单数量</div>
        <!-- 选择框，输入框 -->
        <div class="block">
          <div class="blockin">
            <el-select v-model="work" @change="a" class="xz" placeholder="请选择" size="small">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-date-picker v-model="worktime" value-format="YYYY-MM-DD" type="daterange" @change="a"
              style="width: 250px; height: 23px; margin-left: 10px" range-separator="至" start-placeholder="开始时间"
              end-placeholder="结束时间" :disabled-date="(time) => time.getTime() > Date.now()" />
          </div>
        </div>
        <!-- 左侧文字 -->
        <div class="left">
          <!-- 死数据，后端没有接口 -->
          <p>
            今年
            <span style="font-size: 20px; color: #277bcb">{{
                GdTotal.bn
            }}</span>
            次
          </p>
          <p>
            本月
            <span style="font-size: 20px; color: #277bcb">{{
                GdTotal.by
            }}</span>次
          </p>
          <p>
            昨日
            <span style="font-size: 20px; color: #277bcb">{{
                GdTotal.zr
            }}</span>次
          </p>
        </div>
        <!-- 绘制图表 -->
        <div id="a" style="height: 260px; width: 780px;margin-left: 160px; margin-top: -191px;"></div>
      </div>
      <div class="lefttop" style="margin-left: 8px">
        <div class="title">故障数量分布</div>
        <!-- 绘制图表 -->
        <div id="b" style="height: 300px; width: 920px"></div>
      </div>
    </div>
    <!-- 下边两个图表 -->
    <div class="top" style="margin-top: 8px">
      <div class="lefttop">
        <div class="title">风险严重程度统计</div>
        <div style="display: flex">
          <div>
            <!-- 绘制图表饼形图 -->
            <div id="c" style="height: 230px; width: 260px"></div>
          </div>
          <div>
            <div class="risk">
              <!-- 绘制图表折线图 -->
              <el-date-picker v-model="risk" type="daterange" style="width: 200px; height: 23px; z-index: 20"
                range-separator="至" value-format="YYYY-MM-DD" start-placeholder="开始时间" end-placeholder="结束时间"
                :disabled-date="(time) => time.getTime() > Date.now()" @change="c" />
            </div>
            <div id="c1" style="height: 250px; width: 660px; margin-top: -1px"></div>
          </div>
        </div>
      </div>
      <div class="lefttop" style="margin-left: 8px">
        <div class="title">故障率趋势</div>
        <div class="trend" style="left: 320px">
          <el-date-picker v-model="trend" value-format="YYYY-MM-DD" @change="d" type="daterange"
            style="width: 250px; height: 23px; margin-left: 140px; z-index: 20" range-separator="至"
            start-placeholder="开始时间" end-placeholder="结束时间" :disabled-date="(time) => time.getTime() > Date.now()" />
        </div>
        <!-- 绘制图表 -->
        <div id="d" style="height: 230px; width: 820px; margin-left: 50px"></div>
      </div>
    </div>
    <!-- 最下边一个图表 -->
    <div class="lefttop" style="margin-top: 8px; height: 320px">
      <div class="title">预防性维护占比</div>
      <div class="trend">
        <el-date-picker v-model="maintain" @change="e" type="monthrange" value-format="YYYY-MM-DD"
          :disabled-date="disabledDate" align="right" style="width: 250px; height: 23px; z-index: 20" unlink-panels
          range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份">
          <!-- :disabled-date="(time)=>time.getTime() > Date.now()" -->
        </el-date-picker>
      </div>
      <!-- 绘制图表 -->
      <div id="e" style="height: 80%; width: 100%"></div>
    </div>
    <!-- <button @click="reactYear">111</button> -->
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, onBeforeUpdate } from "vue";
import * as echarts from "echarts";
import { ProjectGroupone, Scalar, getGonDan } from "@/api/model/echarts";
import dayjs from "dayjs";

const work = ref("");
const trend = ref("");
const maintain = ref("");
const risk = ref("");
const worktime = ref("请选择");
const options = reactive([
  {
    value: "所有",
    label: "所有",
  },
  {
    value: "冷冻机",
    label: "冷冻机",
  },
  {
    value: "冷冻泵",
    label: "冷冻泵",
  },
  {
    value: "冷却泵",
    label: "冷却泵",
  },
  {
    value: "冷却塔",
    label: "冷却塔",
  },
  {
    value: "BA",
    label: "BA",
    state,
  },
]);
let state = reactive({
  asd: [
    ["product", "2019", "2020", "2021", "2022"],
    ["制冷机", 1, 1, 1, 1],
    ["冷却泵", 1, 1, 1, 1],
    ["冷冻泵", 1, 1, 1, 1],
    ["冷却塔", 1, 1, 1, 1],
  ],
  asd1: [
    ["product", "2019", "2020", "2021", "2022"],
    ["制冷机", 43, 85, 93, 85],
    ["冷却泵", 83, 73, 55, 85],
    ["冷冻泵", 86, 65, 82, 85],
    ["冷却塔", 72, 53, 39, 85],
  ],
  shuju: [["product", "2019", "2020", "2021", "2022"]],
  b: {
    indicatorName: "故障数量分布",
    firstType: "数据分析",
    secondType: "",
    thirdType: "",
    projectId: 1,
    type: "year",
    dataType: "year",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
  },
  d: {
    indicatorName: "故障率趋势",
    firstType: "数据分析",
    secondType: "",
    type: "year",
    thirdType: "",
    projectId: 1,
    dataType: "year",
    dayFrom: "1900-01-01",
    dayTo: "2023-01-02",
  },
});
async function a(e) {
  // console.log(e);

  // console.log(worktime.value,'value');
  // 基于准备好的dom，初始化echarts实例
  let o = "";

  let datato = dayjs().format("YYYY-MM-DD");
  let datafrom = dayjs().subtract(7, "D").format("YYYY-MM-DD");
  if (typeof e == "object") {
    // console.log(e[0],e[1]);
    datato = worktime.value[0];
    datafrom = worktime.value[1];
  } else {
    if (e === "所有") {
      o = "";
    } else {
      o = e;
    }
  }
  // console.log(o, work.value);
  let myChart = echarts.init(document.getElementById("a"));
  let {data:res} = await ProjectGroupone({
    indicatorName: "工单数量",
    firstType: "数据分析",
    secondType: o,
    projectId: 1,
    type: "day",
    thirdType: "",
    dataType: "day",
    dayFrom: datafrom,
    dayTo: datato,
  });
  console.log(res.data.commonDailyDataList,'工单数量');
  console.log(res.data,'工单数量');
  // work.value = "";
  // worktime.value = "";
  let a = [];
  let b = [];
  let c = [];
  res.data.commonDailyDataList.forEach((item) => {
    b.push(item.number1);
    a.push(`${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`);
    a = [...new Set(a)];
  });
  res.data.commonDailyDataList.forEach((item) => {
    c.push(item.number2);
  });
  myChart.setOption({
    legend: {
      left: 20,
      icon: "rect",
      itemWidth: 20,
      itemHeight: 1,
      orient: "horizontal",
      data: ["工单", "数量"],
    },
    xAxis: {
      type: "category",
      data: a,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "工单",
        type: "line",
        // data: ["12", "14", "10", "14", "10", "12", "13", "8", "11", "10", "11", "13",],
        data: b,
        // 线条覆盖颜色
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "#fdf1ce",
                },
                {
                  offset: 1,
                  color: "#dae3d3",
                },
              ],
              false
            ),
          },
        },
        // 线条颜色
        itemStyle: {
          normal: {
            color: "#f7b851",
          },
        },
        // 线条宽度
        lineStyle: {
          normal: {
            width: 3,
          },
        },
      },
      {
        name: "数量",
        type: "line",
        data: c,
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "#d8e9f5",
                },
                {
                  offset: 1,
                  color: "#d8e9f5",
                },
              ],
              false
            ),
          },
        },
        itemStyle: {
          normal: {
            color: "#479bd0",
          },
        },
        lineStyle: {
          normal: {
            width: 3,
          },
        },
      },
    ],
  });
}
async function b() {
  let {data:res} = await ProjectGroupone(state.b);
  // console.log(res, "故障xxxxxxxxxxxxxx");
  let data1 = [];
  let arr1 = [];
  let arr2 = [];
  let arr3 = [];
  let arr4 = [];
  let da = [];
  res.data.commonDailyDataList.forEach((item) => {
    da.push(item.secondType);
  });
  res.data.commonDailyDataList.forEach((item) => {
    data1.push(`${item.day.substring(0, 4)}`);
    if (item.type == "type1") {
      arr1.push(item.number1);
    } else if (item.type == "type2") {
      arr2.push(item.number1);
    } else if (item.type == "type3") {
      arr3.push(item.number1);
      arr4.push(item.number1);
    } else if (item.type == "type3") {
      arr4.push(item.number1);
    }
  });
  let shuju = [["product", "2019", "2020", "2021", "2022"]];
  let a = da.splice(0, 4);
  // console.log(a);

  let data = da.splice(0, 3);
  console.log(data);

  let arrays = [
    arr1.splice(0, 4),
    arr2.splice(0, 4),
    arr3.splice(0, 4),
    arr4.splice(0, 4),
  ];
  // console.log(arrays);
  for (var i = 0; i < a.length; i++) {
    shuju.push([a[i], ...arrays[i]]);
  }
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.getElementById("b"));
  myChart.setOption({
    legend: {
      icon: "rect",
      itemWidth: 20,
      itemHeight: 1,
    },
    tooltip: {},
    dataset: {
      source: shuju,
    },
    xAxis: {
      type: "category",
      // data: ['']
    },
    yAxis: {},
    series: [
      // { type: "bar", color: "#90cd50" },
      // { type: "bar", color: "#ffc000" },
      // { type: "bar", color: "#d6ebfa" },
      // { type: "bar", color: "#0070c0" },
    ],
  });
}

// 饼形图数据请求不到
async function c(e) {
  let datato = dayjs().format("YYYY-MM-DD");
  let datafrom = dayjs().subtract(7, "D").format("YYYY-MM-DD");
  let w = ["低", "中", "高"];
  let di = 0;
  let zhong = 0;
  let gao = 0;
  let a = [];
  let type1 = [];
  let type2 = [];
  let type3 = [];
  if (typeof e == "object") {
    datato = risk.value[0];
    datafrom = risk.value[1];
  }

  w.forEach(async (item) => {
    let {data:res} = await Scalar({
      indicatorName: "风险严重程度统计",
      firstType: item,
      secondType: "",
      thirdType: "",
      projectId: 1,
      dataType: "scalar",
      dayFrom: datafrom,
      dayTo: datato,
    });
    // res获取饼形图数据为null
    console.log(res, "低中高", item);
    if (res.data.scalarList[0].type == "低") {
      // console.log(res.data.scalarList[0].data,'123455566');
      di = res.data.scalarList[0].data;
    }
    if (res.data.scalarList[0].type == "中") {
      zhong = res.data.scalarList[0].data;
    }
    if (res.data.scalarList[0].type == "高") {
      gao = res.data.scalarList[0].data;
    }
  });
  let myChart = echarts.init(document.getElementById("c"));
  let {data:res} = await ProjectGroupone({
    indicatorName: "风险严重程度统计",
    firstType: "数据分析",
    secondType: "",
    thirdType: "",
    projectId: 1,
    type: "year",
    dataType: "year",
    dayFrom: datato,
    dayTo: datafrom,

  });
  res.data.commonDailyDataList.forEach((item) => {
    if (item.type == "type1") {
      type1.push(item.number1);
    }
    if (item.type == "type2") {
      type2.push(item.number1);
    }
    if (item.type == "type3") {
      type3.push(item.number1);
    }
    a.push(`${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`);
    a = [...new Set(a)];
  });
  myChart.setOption({
    tooltip: {
      trigger: "item",
    },
    legend: {
      data: ["高", "中", "低"],
      left: "center",
      top: "bottom",
      icon: "rect",
      itemWidth: 20,
      itemHeight: 1,
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: [
          { value: gao, name: "高" },
          { value: zhong, name: "中" },
          { value: di, name: "低" },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  });

  // 基于准备好的dom，初始化echarts实例
  let myChart1 = echarts.init(document.getElementById("c1"));
  myChart1.setOption({
    legend: {
      icon: "rect",
      itemWidth: 20,
      itemHeight: 1,
      left: 20,
      orient: "horizontal",
      data: ["高", "中", "低"],
    },
    xAxis: {
      type: "category",
      data: a,
      axisLabel: {
        rotate: 45,
      },
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "高",
        data: type1,
        type: "line",
      },
      {
        name: "中",
        data: type2,
        type: "line",
      },
      {
        name: "低",
        data: type3,
        type: "line",
      },
    ],
  });
}
//故障率趋势图表
async function d(ee) {
  let datato = "1900-01-01";
  let datafrom = "2023-01-02";
  let a = [];
  let b = [];
  let c = [];
  let d = [];
  let e = [];
  if (typeof ee == "object") {
    datato = trend.value[0];
    datafrom = trend.value[1];
  }

  let {data:res} = await ProjectGroupone({
    indicatorName: "故障率趋势",
    firstType: "数据分析",
    secondType: "",
    thirdType: "",
    projectId: 1,
    dataType: "day",
    dayFrom: datato,
    dayTo: datafrom,
  });
  // console.log(res, "故障律");
  res.data.commonDailyDataList.forEach((item) => {
    a.push(`${item.day.substring(6, 7)}/${item.day.substring(8, 10)}`);
    a = [...new Set(a)];
    b.push(item.number1);
    if (item.type == "type1") {
      c.push(item.number1);
    }
    if (item.type == "type2") {
      d.push(item.number1);
    }
    if (item.type == "type3") {
      e.push(item.number1);
    }
  });
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.getElementById("d"));
  myChart.setOption({
    legend: {
      icon: "rect",
      itemWidth: 20,
      itemHeight: 1,
      left: 50,
      data: ["所有", "冷冻机", "冷冻泵", "冷却泵", "冷却塔"],
    },
    grid: {
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: a,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "所有",
        type: "line",
        stack: "Total",
        // data: b,
      },
      {
        name: "冷冻机",
        type: "line",
        stack: "Total",
        // data: c,
      },
      {
        name: "冷冻泵",
        type: "line",
        stack: "Total",
        // data: d,
      },
      {
        name: "冷却泵",
        type: "line",
        stack: "Total",
        // data: e,
      },
      {
        name: "冷却塔",
        type: "line",
        stack: "Total",
        // data: [820, 932, 901, 934, 1290, 1330, 1320, 122, 322, 1231, 213, 231],
      },
    ],
  });
}
async function e(e) {
  // console.log(e, "ccccccccccccccccccccccccccccc");
  let datato = "1900-01-01";
  let datafrom = "2123-01-02";
  let a = [];
  let b = [];
  if (typeof e === "object") {
    // datato = e[0].substring(0, 4);
    // datafrom = e[1].substring(0, 4);
    datato = e[0];
    datafrom = e[1];
  }

  let {data:res} = await ProjectGroupone({
    indicatorName: "预防性维护占比",
    firstType: "数据分析",
    secondType: "",
    thirdType: "",
    projectId: 1,
    dataType: "day",
    dayFrom: datato,
    dayTo: datafrom,
  });
  // console.log(res, '预防性维护占比');
  res.data.commonDailyDataList.forEach((item) => {
    a.push(`${item.day.substring(5, 7)}/${item.day.substring(8, 10)}`);
    a = [...new Set(a)];
    b.push(item.number1);
  });

  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.getElementById("e"));
  myChart.setOption({
    xAxis: {
      type: "category",
      data: a,
      axisLabel: {
        rotate: 45,
      },
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        // data: b,
        type: "line",
      },
    ],
  });
}
// 获取前12月月份函数
function reactYear() {
  var d = new Date();
  var result = [];
  for (var i = 0; i < 12; i++) {
    d.setMonth(d.getMonth() - 1);
    var m = d.getMonth();
    m = m < 10 ? "0" + m : m;
    //在这里可以自定义输出的日期格式
    //					result.push(d.getFullYear() + "-" + m);
    result.push(d.getFullYear() + "." + m);
  }
  console.log(result, 2222222222);
  return result;
}
let GdTotal = ref({});
async function ProjectGroupones() {
  // const year = new Date().getFullYear();
  const {data:res} = await getGonDan();
  console.log('工单数量',res);
  GdTotal.value = res.data;
}
onMounted(() => {
  a();
  b();
  c();
  d();
  e();
  reactYear();
  ProjectGroupones();
});
onBeforeUpdate(() => { });
const disabledDate = (time) => {
  return time.getTime() > Date.now();
};
</script>

<style scoped>
.block {
  display: flex;
  margin-left: 200px;
  margin-top: 15px;
  position: relative;
  min-height: 25.5px;
}

.blockin {
  position: absolute;
  display: flex;
  align-items: center;
  min-height: 25.5px;
  z-index: 20;
}

.top {
  display: flex;
}

.risk {
  position: relative;
  top: 20px;
  left: 200px;
}

.zong {
  /* background-color: #e5edf7; */
  height: 1000px;
  width: 100%;
}

.trend {
  position: relative;
  width: 250px;
  left: 450px;
  top: 25px;
}

.left p {
  font-size: 12px;
  margin-top: 30px;
}

.lefttop {
  width: 49%;
  /* width: 750px; */
  height: 300px;
  background-color: white;
  border-radius: 20px;
  margin-left: 15px;
}

.left {
  position: relative;
  left: 30px;
  top: 10px;
}

.title {
  font-size: 18px;
  font-weight: 550;
  color: #4d62a5;
  padding-left: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f2f3f8;
}

.xz {
  width: 100px;
  background: #c0cfe3;
  margin-left: 130px;
  border-radius: 10px;
  color: #c0cfe3;
}
</style>
